<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="余额充值" :border-bottom="false" title-color="#333"
				back-icon-color="#333"></u-navbar>
		</view>
		<view class="selectPrice">
			<view class="title">
				请选择充值金额<span class="tips">(账户余额{{balance}}元)</span>
			</view>
			<view class="tabs">
				<view class="tab" v-for="item in tabPrice" :key="item.id" :class="{active:this.selectId== item.id}"
					@click="selectTab(item.id)">
					{{item.price}}元
				</view>
			</view>
			<view class="iptPrice">
				<span>自定义充值</span>
				<input type="number" v-model="iptPrice" @focus="change" @blur="change" placeholder="请输入充值金额" />
				<span>元</span>
			</view>
		</view>
		<view class="agreement_btn">
			<!-- <view class="agreement">
				<view class="agree" @click="agreement">
					<u-icon size="27" :name="'/static/selected.png'" v-if="agree"></u-icon>
					<span class="icon" v-else></span>
				</view>
				<view class="readAgreement">
					<span>阅读并同意</span> <span class="xiyi">《平台余额充值协议》</span>
				</view>
			</view> -->
			<view class="confirm_pay" @click="pay">
				确认支付
			</view>
		</view>
		<view class="tipsCt">
			<view class="tipTitle">
				温馨提示
			</view>
			<view class="tipOne">
				1、余额充值成功后，只能用于平台消费支付，不可提现；
			</view>
			<view class="tipTwo">
				2、账户余额如有异议请联系平台客服工作人员处理；
			</view>
		</view>
	</view>
</template>

<script>
	import {getRecharge} from '@/api/user.js'
	import { toast } from '../../utils/common';
	export default {
		data() {
			return {
				balance: "",
				selectId: "0",
				price: "200",
				iptPrice: "",
				agree: false,
				tabPrice: [{
						id: "0",
						price: '200'
					},
					{
						id: "1",
						price: '500'
					},
					{
						id: "2",
						price: '1000'
					},
				]
			};
		},
		onLoad(res) {
			console.log(res.balance);
			this.balance = res.balance
		},
		methods: {
			selectTab(id) {
				this.selectId = id
				this.price = this.tabPrice[id].price
				this.iptPrice =''
			},
			change(){
				this.selectId = -1
				this.price = this.iptPrice
			},
			pay(){
				if(!this.price){
					toast("请输入金额")
					return
				}
				if(this.price==0){
					toast("不能充值0元")
					return
				}
				
				getRecharge({
					amount:this.price
				}).then(res=>{
					if(res.code==200){
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.paySign,
							success: function(res) {
								// success && success(res.data);
								toast('支付成功');
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/home/home'
									});
								}, 500);
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								});
								// fail && fail(err.data);
							},
							complete(ress) {
								// complete && complete(ress.data);
							}
						});
					}
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		box-sizing: border-box;
		padding: 1rpx;
		background-color: #fff;
		width: 750rpx;
		min-height: 100vh;
		overflow: hidden;
	}

	.selectPrice {
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx;

		.title {
			font-size: 26rpx;
			color: #333;
			margin: 10rpx 0;
			display: flex;
			align-items: center;

			.tips {
				font-size: 22rpx;
				color: #A0A0A0;
				margin-left: 15rpx;
			}
		}

		.tabs {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tab {
				width: 216rpx;
				height: 146rpx;
				background: #FFFFFF;
				border-radius: 10px;
				border: 2rpx solid #E9E9E9;
				text-align: center;
				line-height: 146rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}

			.tab.active {
				width: 216rpx;
				height: 146rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				border: 2rpx solid #FB4525;
			}
		}

		.iptPrice {
			height: 90rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 2rpx solid #E9E9E9;
			margin: 40rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20rpx;
		}
	}

	.agreement_btn {
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;

		.agreement {
			display: flex;
			align-items: center;
		}

		.agree {
			width: 32rpx;
			height: 32rpx;
			box-sizing: border-box;
			overflow: hidden;

			.icon {
				display: inline-block;
				width: 27rpx;
				height: 27rpx;
				border-radius: 50%;
				border: 1rpx solid #dedede;
			}
		}

		.readAgreement {
			margin-left: 10rpx;

			.xiyi {
				color: #FB4525;
			}
		}

		.confirm_pay {
			text-align: center;
			color: #fff;
			width: 690rpx;
			height: 80rpx;
			background: #FB4525;
			border-radius: 40rpx;
			line-height: 80rpx;
			margin: 40rpx auto;
		}

	}

	.tipsCt {
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		font-size: 24rpx;
		line-height: 40rpx;
		.tipTitle {
			font-size: 28rpx;
		}
	}
</style>